<template>
  <div class="draggable-edit-container">
    <div>
      <div v-for="item in components" 
        style="padding: 20px;background-color: pink;width: 100px;border: 1px solid black;"
        @click.stop="addComponent(item)"
      >
        <div>{{ item.icon }}</div>
        <div>{{ item.name }}</div>
        <div>{{ item.type }}</div>
        <div>{{ item.config }}</div>
      </div>
    </div>

    <!-- 中间组件区域 -->
    <div style="background-color: gainsboro;width: 400px;min-height: 80vh;margin-left: 100px;">
      <div>假装这里有个状态栏</div>
      <div 
        name="component-box-wrapper"
        style="position: relative;height: 80px;background-color: aquamarine;cursor: pointer;"
        v-for="(item, index) in templates"
        :key="item.id"
        :class="item.checked ? 'active':''"
        @click="chooseComponent(item)"
        >
        <div name="component-box" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #fff;">
          
          <search 
            v-if="item.type == 'search'"
            :placeholder="item.placeholder"
          ></search>
          
          <div v-else>123</div>
        
        
        </div>

        <div 
            v-if="item.checked"
            name="operation" 
            style="position: absolute;top: 0;right: -20px;width: 20px;height: 40px;background-color: bisque;">
          <div @click.stop="handleOperation('up', item, index)" :class="index === 0 ? 'button-disabled' : ''">up</div>
          <div @click.stop="handleOperation('down', item, index)" :class="index === templates.length - 1 ? 'button-disabled' : ''">down</div>
          <div @click.stop="handleOperation('delete', item, index)">delete</div>
        </div>
      </div>
    </div>

    <!-- 右侧配置区域 -->
    <div>
      <div>
        {{  choosedComponent  }}
          <SearchForm v-if="choosedComponent.type =='search'" :config="choosedComponent"/>

          <div v-else>其他</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { fa } from 'element-plus/es/locale';
import {reactive, ref} from 'vue'
import {search} from './draggable-components'
import {SearchForm} from './draggable-form'

let index = ref(true)
const components = reactive([
  {
    icon: 'input',
    name: '输入框',
    type: 'input',
    config: {}
  },
  {
    icon: 'search',
    name: '搜索框',
    type: 'search',
    config: {
      placeholder: '请输入'
    }
  },
  {
    icon: 'courses',
    name: '课程列表',
    type: 'list',
    config: {
      listType: [''],
      title: '标题',
      showMore: true, // 是否显示更多
      showMorePath: '/pages/loadmore/loadmre', // 显示更多路径

    }
  },
  {
    icon: 'coursel',
    name: '轮播图',
    type: 'coursel',
    config: {}
  },
])

let global_id = 6

const addComponent = function (component) {
  let data = {
    ...component.config,
    name: component.name,
    type: component.type,
    checked: false,
  }
  console.log(data)
  templates.push(data)
  global_id += 1
}

const templates = reactive([
  {
    id: 1,
    checked: false,
  }
])

let choosedComponent = reactive({})
const chooseComponent = function (item) {
  templates.forEach(item => {
    item.checked = false
  })
  item.checked = true
  choosedComponent = item
}

const handleOperation = function (type, item, index ) {

  function switchItem (index1, index2) {
    let temp = templates[index1]
    templates[index1] = templates[index2]
    templates[index2] = temp
  }

  function removeItem (index) {
    templates.splice(index, 1)
  }

  switch(type) {
    case 'up':
      if (index === 0) return
      switchItem(index, index - 1)
      break;

    case 'down':
      if (index + 1 === templates.length) return
      switchItem(index, index + 1)
      break;

    case 'delete':
      removeItem(index)
      break;
  }
}




</script>

<style lang="scss" scoped>
.draggable-edit-container {
  display: flex;
}

.active {
  border: 3px dotted #57aeff;
  box-sizing: content-box;
  margin: -4px;

}
.button-disabled {
  color: #ccc;
  cursor: no-drop;
}
</style>